<template>
  <div ref="chart" style="width: 100%; height:100%;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { mapGetters } from 'vuex';
export default {
  name: 'RingChart',
  computed: {
    ...mapGetters(['sidebar']) // 获取侧边栏状态
  },
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    'sidebar.opened': {
      immediate: true, // 立即执行一次
      handler(newVal) {
        this.$nextTick(() => {
          window.addEventListener('resize', () => this.myChart.resize());
        });
      }
    },
    // 深度监听数据变化
    chartData: {
      deep: true,
      handler(newData) {
        this.initChart(newData);
      }
    }
  },
  data() {
    return {
      myChart: null,
      resizeObserver: null  // 添加ResizeObserver实例
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    this.cleanup();
  },
  methods: {
    cleanup() {
      // 移除ResizeObserver
      if (this.resizeObserver) {
        this.resizeObserver.disconnect();
      }
      // 移除window.resize监听
      if (this.resizeHandler) {
        window.removeEventListener('resize', this.resizeHandler);
      }
      // 销毁图表实例
      if (this.myChart) {
        this.myChart.dispose();
      }
    },
    initChart() {
      const chartDom = this.$refs.chart;
      this.myChart = echarts.init(chartDom);

      const option = {
        // 标题（可选）
        // title: {
        //   text: '分类统计',
        //   left: 'center',
        //   textStyle: {
        //     color: '#333',
        //   },
        // },

        // 提示框（鼠标悬停显示详细信息）
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)', // 显示名称、数值、百分比
        },

        // 图例（可选）
        // legend: {
        //   orient: 'vertical',
        //   left: 'left',
        //   data: this.chartData.map(item => item.name),
        // },

        // 环形图系列
        series: [
          {
            name: '分类统计',
            type: 'pie',
            radius: ['50%', '70%'], // 内半径50%，外半径70%，形成环形
            avoidLabelOverlap: false,
            // itemStyle: {
            //   borderRadius: 10, // 圆角（可选）
            //   borderColor: '#fff', // 分隔线颜色
            //   borderWidth: 2, // 分隔线宽度
            // },
            label: {
              show: true,
              position: 'outside', // 标签显示在环形外部
              // formatter: '{b}\n{c}', // 显示名称和数值
              formatter: '{name|{b}}\n{time|{c}}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 30,
              rich: {
                name: {
                  fontSize: 12,
                  color: '#9F9F9F'
                },
                // time: {
                //   fontSize: 12,
                //   color: function (params) {
                //     const colors = ['#FFBA00','#499DF1','#EE473B' ];
                //     const index = params.dataIndex % colors.length;
                //     console.log(colors[index])
                //     return colors[index]
                //   },
                // }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            // labelLayout: function (params) {
            //   const isLeft = params.labelRect.x < this.myChart.getWidth() / 2;
            //   const points = params.labelLinePoints;
            //   // Update the end point.
            //   points[2][0] = isLeft
            //     ? params.labelRect.x
            //     : params.labelRect.x + params.labelRect.width;
            //   return {
            //     labelLinePoints: points
            //   };
            // },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold',
              },
            },
            data: this.chartData,
            itemStyle: {
              color: function (params) {
                // 根据数据索引返回渐变色（示例：循环固定配色）
                const colors = [
                  ['#FFBA00', '#FFDC7E'],
                  ['#499DF1', '#C7E3FF'],
                  ['#EE473B', '#F49E97'],
                ];
                const index = params.dataIndex % colors.length;
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: colors[index][0] },
                  { offset: 1, color: colors[index][1] },
                ]);
              },
            },
          },
        ],
      };

      this.myChart.setOption(option);

      // 响应式调整
      window.addEventListener('resize', () => this.myChart.resize());
    },
  },
};
</script>
